<template>
  <div class="app-container home">
    <h1>百货商城管理系统</h1>
    <div class="overview-container">
      <div class="overview">
        <div class="overview-header">商品总览</div>
        <div class="overview-body">
          <div class="overview-body__item">
            <span>{{ pmsProductInfo.offCount }}</span>
            <span>已下架</span>
          </div>
          <div class="overview-body__item">
            <span>{{ pmsProductInfo.onCount }}</span>
            <span>已上架</span>
          </div>
          <div class="overview-body__item">
            <span>{{ pmsProductInfo.recommendCount }}</span>
            <span>推荐商品</span>
          </div>
          <div class="overview-body__item">
            <span>{{ pmsProductInfo.productCount }}</span>
            <span>全部商品</span>
          </div>
        </div>
      </div>
      <div class="overview ml20">
        <div class="overview-header">用户总览</div>
        <div class="overview-body">
          <div class="overview-body__item">
            <span>{{ umsUserInfo.todayIncreased }}</span>
            <span>今日新增</span>
          </div>
          <div class="overview-body__item">
            <span>{{ umsUserInfo.yesterdayIncreased }}</span>
            <span>昨日新增</span>
          </div>
          <div class="overview-body__item">
            <span>{{ umsUserInfo.monthIncreased }}</span>
            <span>本月新增</span>
          </div>
          <div class="overview-body__item">
            <span>{{ umsUserInfo.userCount }}</span>
            <span>用户总数</span>
          </div>
        </div>
      </div>
      <div class="overview mt20">
        <div class="overview-header">品牌总览</div>
        <div class="overview-body">
          <div class="overview-body__item">
            <span>{{ pmsBrandInfo.factoryCount }}</span>
            <span>品牌制造商</span>
          </div>
          <div class="overview-body__item">
            <span>{{ pmsBrandInfo.brandCount }}</span>
            <span>品牌总数</span>
          </div>
        </div>
      </div>
      <div class="overview mt20 ml20">
        <div class="overview-header">专题总览</div>
        <div class="overview-body">
          <div class="overview-body__item">
            <span>{{ cmsSubjectInfo.showCount }}</span>
            <span>显示专题</span>
          </div>
          <div class="overview-body__item">
            <span>{{ cmsSubjectInfo.subjectCount }}</span>
            <span>专题总数</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAdminHomeInfo } from '@/api/home';
export default {
  name: "index",
  watch: {
    $route: {
      handler(to, from) {
        if (to.name === '首页') {
          getAdminHomeInfo().then(response => {
            this.pmsProductInfo = response.data.pmsProductInfo;
            this.umsUserInfo = response.data.umsUserInfo;
            this.pmsBrandInfo = response.data.pmsBrandInfo;
            this.cmsSubjectInfo = response.data.cmsSubjectInfo;
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      pmsProductInfo: {
        onCount: null,
        offCount: null,
        recommendCount: null,
        productCount: null
      },
      umsUserInfo: {
        todayIncreased: null,
        yesterdayIncreased: null,
        monthIncreased: null,
        userCount: null,
      },
      pmsBrandInfo: {
        factoryCount: null,
        brandCount: null
      },
      cmsSubjectInfo: {
        showCount: null,
        subjectCount: null
      }
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  .overview-container {
    display: flex;
    flex-flow: row wrap;
  }
  .overview {
    width: 500px;
    border: 1px solid #DCDFE6;

    .overview-header {
      color: #606266;
      padding: 15px 20px;
      background: #f2f6fc;
      font-weight: 700;
    }

    .overview-body {
      display: flex;
      flex-flow: row nowrap;
      padding: 40px;

      .overview-body__item {
        span:first-of-type {
          margin-bottom: 10px;
          color: #f56c6c;
          font-size: 24px;
        }
        span:last-of-type {
          font-size: 16px;
        }
        display: flex;
        flex: 1;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>